<template>
  <div class="panelshow" v-if="panelshow">
    <h2 @click="closeSon">关闭</h2>
    <!-- 原生DOM绑定系统事件 -->
    <button @click="handler">原生DOM绑定系统事件</button>
    <!-- Event1组件:并非原生DOM节点,其绑定的点击事件也并非原生DOM事件,而是自定义事件 -->
    <!-- native属于一个修饰符,可以将非原生事件变为原生 -->
    <!-- 当前DOM click事件,其实是给子组件的根节点绑定了点击事件---利用到事件委派 -->
    <Event1 @click.native="handler1" />
    <!-- 原生DOM绑定自定义事件没有意义,因为无法触发emit函数  -->
    <button @xxx="handler2">原生DOM绑定自定义事件</button>
    <!-- 组件标签 -->
    <Event2 @click="handler3" @xxx="handler3" />
  </div>
</template>


<script type="text/javascript">
import Event1 from "./Events/Event1.vue";
import Event2 from "./Events/Event2.vue";
export default {
  name: "Event",
  props: { panelshow: { type: Boolean, default: false } },
  components: {
    Event1,
    Event2,
  },
  methods: {
    //原生DOMbutton的事件回调
    handler(event) {
      console.log("原生DOM单机事件", event);
    },
    handler1() {
      console.log("event1事件的回调");
    },
    handler2() {},
    handler3(params) {
      console.log("event2的自定义事件", params);
    },
    closeSon() {
      this.$emit("DisplayHide");
    },
  },
};
</script>

<style>
</style>